@()(implicit request: RequestHeader,messages: Messages)
@main("Profile information")("userProfile","personStat") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">

	<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>

	<style>
			.genome-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				border: 0px solid #ccc;
				background-color: white;
			}

			select:not([multiple]) {
				-webkit-appearance: none;
				-moz-appearance: none;
				background-position: right 50%;
				background-repeat: no-repeat;
				background-image: url();
				padding: .5em;
				padding-right: 1.5em
			}

			.fr {
				float: right;
			}

			.base-info .item .title span {
				display: inline-block;
				border-left: 2px solid #0b8af4;
				font-size: 14px;
				color: #333;
				padding-left: 10px;
			}

			.photo span {
				display: block;
				width: 92px;
				height: 92px;
			}

			.photo img {
				width: 100%;
				height: 100%;
			}

			.avator-txt {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 17px;
				color: #1d6af2;
				cursor: pointer;
				text-align: center;
			}

	</style>
	<div class="page-content">

		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa fa-user"></i>
					<a href="">Profile information</a>
				</li>
			</ul>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="portlet light profile-sidebar-portlet base-info">

					<div class="portlet-title">
						<div class="user-info item">
							<div class="title clear">
								<a href="@routes.UserController.updatePersonInfoBefore" class="fr">Edit&gt;&gt;</a>
								<span>Profile information</span>
							</div>
						</div>
						<div class="caption">
						</div>
					</div>

					<div class="portlet-body">
						<div class="row">
							<div class="col-md-4">
								<div class="photo fl" align="center">
									<span>
										<img class="avatarImage" src="@routes.UserController.getAvatarImage">
									</span>
									<div style="margin-top: 10px">
										<a class="avator-txt" style="" href="#" onclick="UserProfile.imageUpdateModalShow">
											Edit image</a>
									</div>
								</div>
							</div>
							<div class="col-md-8">
								<div class="info-box" id="personInfo">
									<p><span>User ID：</span> <span id="userId"></span> </p>
									<p><span>User name：</span><span id="fullName"></span> </p>
									<p><span>E-mail：</span><span id="email"></span></p>
									<p><span>Institution ：</span><span id="institution"></span></p>
								</div>
							</div>
						</div>

						<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog" style="width: 700px">
								<div class="modal-content">
									<div class="modal-header bg-primary">
										<h4 class="modal-title">
											<span id="lblAddTitle" style="font-weight: bold">@messages("editImage")</span>
										</h4>
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
											<i class="fa fa-remove"></i>
										</button>
									</div>
									<form class="form-horizontal" id="form" action="" data-toggle="validator">
										<div class="modal-body">
											<div class="row-fluid">

												<div class="form-group">
													<label class="control-label col-sm-4">@messages("imageFile")（*.jpg;*.png）:</label>
													<div class="col-sm-8">
														<input type="file" class="file control-label" name="file"
														data-show-preview="false" accept=".jpg,.jpeg,.png"
														data-show-upload="false" >
													</div>
												</div>

											</div>
										</div>
										<div class="modal-footer bg-info">
											<input type="hidden" id="id" name="id" />
											<button type="button" class="btn blue" onclick="UserProfile.myRun">
												@messages("confirm")</button>
											<button type="button" class="btn green" data-dismiss="modal">
												@messages("cancel")</button>
										</div>
									</form>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>
	</div>


	<script>

			var id = "@request.session.get("id")"

			$(function () {
				Tool.fileInput
				UserProfile.init


			})
	</script>


}
